<script lang="ts" setup>
import { defineProps } from 'vue';

const { list } = defineProps({
      list: Array<{className:string,title:string,content:string}>
});
</script>

<template>
 <div v-for="item in list" :key="item.title">
        <p class="message">
          <span :class="item.className"></span>
        <div>
          <span class="title">系统通知</span>
          <nav><van-text-ellipsis :lines="1" :content="item.content" /></nav>

        </div>
        </p>
        <hr>
      </div>
</template>


<style lang="scss" scoped>
.message {
  display: flex;
  // width: 100%;
  padding: 0 10px;
  margin-bottom: 5px;

}

.title {
  font-size: 16px;

}

hr {
  width: 80%;
  opacity: 0.2;
  position: relative;
  left:20px;
  // color: green;
}


nav {
  color: gray;
//   width: 80%;
  margin-top: 5px;
  padding-right:30px;

}
.iconfont{
    font-size: 34px;
    margin-right: 10px;
}

.icon-xitongtongzhi {
  color: rgb(82, 133, 6);
}

.icon-huodongtongzhi{
    color: #ed7960 ;
}
.icon-xitongtongzhi1{
    color: rgb(209, 177, 15);
}
</style>